@import '@/app/styles/variables';

.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 40px;
  width: 100%;
}

.otherGap {
  gap: 32px;
}

.xl {
  grid-template-columns: repeat(5, 1fr);
}

.l {
  grid-template-columns: repeat(4, 1fr);
}

.m {
  grid-template-columns: repeat(3, 1fr);
}
.sm {
  grid-template-columns: repeat(2, 1fr);
}
.article {
  grid-template-columns: repeat(3, 1fr);
}
@include media(lg) {
  .l {
    grid-template-columns: repeat(3, 1fr);
  }
}

@include media(md) {
  .grid {
    gap: 32px;
  }

  .xl {
    grid-template-columns: repeat(4, 1fr);
  }

  .l {
    grid-template-columns: repeat(3, 1fr);
  }
  .m {
    grid-template-columns: repeat(2, 1fr);
  }
  .article {
    grid-template-columns: repeat(2, 1fr);
  }
  .sm {
    grid-template-columns: repeat(2, 1fr);
  }
}

@include media(sm) {
  .grid {
    gap: 32px;
  }

  .xl {
    grid-template-columns: repeat(3, 1fr);
  }

  .l {
    grid-template-columns: repeat(3, 1fr);
  }
  .m {
    grid-template-columns: repeat(1, 1fr);
  }
  .sm {
    grid-template-columns: repeat(1, 1fr);
  }
  .article {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (max-width: 480px) {
  .grid {
    gap: 15px;
  }
  .article {
    gap: 24px;
  }

  .xl {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 15px;
  }

  .l {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 15px;
  }
}
